<!-- 设备返修审核 -->
<template>
  <a-modal v-model="visible" :title="title" width="540px" @ok="onSubmit" @cancel="cancel" centered>
    <a-form-model name="ruleForm" class="ant-advanced-form" ref="ruleForm" :model="params" :rules="rules">
      <a-row>
        <a-col :span="12" style="margin-bottom: 12px;">
          <span class="title-label">设备号：</span>
          {{ data.deviceNo || "-" }}
        </a-col>
        <a-col :span="12" style="margin-bottom: 12px;">
          <span class="title-label">车牌号：</span>
          {{ data.licensePlate || "-" }}
        </a-col>
        <a-col :span="24" style="margin-bottom: 12px;">
          <div class="flex_start">
            <span class="title-label">卡状态：</span>
            <template v-if="data.iccStatus == 1">
              <div class="yuan green"></div>
              <div>正常</div>
            </template>
            <template v-else-if="data.iccStatus == 2">
              <div class="yuan red"></div>
              <div>不可用</div>
            </template>
            <template v-else>
              -
            </template>
          </div>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="审核" prop="reviewResult" class="form-w-70" :colon="false">
            <a-radio-group name="type" v-model="params.reviewResult" :options="options" />
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="备注信息" prop="reviewRemarks" class="form-w-70" :colon="false"
            style="margin-bottom:0 !important;">
            <a-input type="textarea" v-model.trim="params.reviewRemarks" :maxLength="100" :rows="4" style="width:100%;"
              placeholder="请输入备注信息"></a-input>
            <div style="position: absolute;right:10px;bottom:-4px;color:#999999;">
              {{ (params.reviewRemarks === '' || params.reviewRemarks === undefined) ? 0 :
              params.reviewRemarks.length }}/100</div>
          </a-form-model-item>
        </a-col>

      </a-row>
    </a-form-model>

  </a-modal>
</template>
<script>
import { deviceRepairUpdate } from '@/services/commonApi'
// const head = getAuthorizationHead()
export default {
  data () {
    return {
      title: '设备号返修审核',
      visible: false,
      data: {},
      params: {},
      options: [
        { label: '审核通过', value: 1 },
        { label: '审核不通过', value: 2 }
      ],
      rules: {
        reviewResult: [{ required: true, message: '请选择审核结果', trigger: 'blur' }],
        reviewRemarks: [
          { required: true, message: '请输入备注信息', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    cancel () {
      this.$refs.ruleForm.resetFields()
      this.visible = false
      this.data = {}
    },
    open (record) {
      this.data = record
      this.visible = true
    },
    async submit () {
      const res = await deviceRepairUpdate(this.data.id, { ...this.params })
      const { isSuccess, msg } = res
      if (isSuccess) {
        this.$message.newFun('审核操作成功！', 'success', 3)
        this.cancel()
        this.$emit('getList', this.id)
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    onSubmit () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.submit()
        }
      })
    }
  }

}
</script>
<style>
.ant-upload-kuang .ant-upload {
  width: 122px !important;
  height: 120px !important;
  margin: 0;
}

.ant-upload-kuang .ant-upload-list-picture-card .ant-upload-list-item {
  width: 120px !important;
  height: 120px !important;
  margin: 0;
}

.ant-upload-kuang .ant-upload-list-picture .ant-upload-list-item,
.ant-upload-list-picture-card .ant-upload-list-item {
  padding: 0px;
}
</style>
